<template>
	<view class="page">
		<view class="list-item" v-for="(item,index) in list" :key="index" @click="connect(item)">
			<view class="avatar">
				<text class="round" v-if="!item.isRead">{{item.isReadCount}}</text>
				
				<image :src="item.recipientImages" mode="widthFix"></image>
			</view>
			<view class="content">
				<view class="title">
					<text class="name">{{ item.recipientName }}</text>
					<text class="time">{{item.createTime | formatDate}}</text>
				</view>
				<view class="txt">{{item.message}}</view>
			</view>
		</view>
		
		<u-empty mode="message" v-if="list.length==0" marginTop="200" >
		</u-empty>
	</view>
</template>

<script>
	import {messageListAPI} from "@/api/user.js"
	import pageing from "@/mixins/pageing"
	export default {
		mixins:[pageing],
		data() {
			return {
				list: [
					// {avatar: 'https://ww1.sinaimg.cn/mw690/a1a9fb72gy1hl1cd1znplj20j60j6n0h.jpg', name: '云端遗梦录', read: 1},
					// {avatar: 'https://wx1.sinaimg.cn/mw690/006zUvE2gy1hlzne8puvvj30p40p4mz0.jpg', name: '我要月亮奔我而来', read: 3},
					 
				]
			};
		},
		created() {
			this.getlist()
		},
		methods: {
			getlist(){
				messageListAPI({
					 "pageNo": this.pageNo,
					  "pageSize": this.pageSize,
					  "type": 0,
				}).then(res=>{
					this.list=res
				})
			},
			connect(item) {
				uni.navigateTo({
					url:`/pages/my/websock/chat?recipientName=${item.recipientName}&recipientId=${item.recipientId}&recipientImages=${item.recipientImages?item.recipientImages:''}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}
	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f7f8f9;
		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;
			.round {
				position: absolute;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #ef5656;
				top: -8rpx;
				right: -8rpx;
				z-index: 1;
				font-size: 16rpx;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.content {
			flex: 1;
			.title {
				display: flex;
				justify-content: space-between;
				.name {
					font-weight: bold;
				}
				.time {
					color: #999;
					font-size: 24rpx;
				}
			}
			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>
